<div class="c-homepage-card c-homepage-card--spotlight">
	{%
		set avatar = {
			cssClass: "c-homepage-card__spotlight-avatar",
			image: "img/spotlight/" + spotlight.image,
			link: "/spotlight/" + spotlight.name | slugify | url,
			name: spotlight.name
		}
	%}
	{% include "avatar.njk" %}
	<div class="c-homepage-card__spotlight__info">
		<p class="u-font-size-body-medium c-homepage-card__spotlight-name">
			{{ spotlight.name }}
		</p>
		<p class="u-font-size-body-small u-text-transform-uppercase c-homepage-card__spotlight-role">
			{{ spotlight.role }}
		</p>
	</div>
</div>

<div class="c-homepage-card">
	<h2 class="c-heading-larger" id="meet-the-community">
		Meet the community
	</h2>
	<p class="c-homepage-card__description">
		{{ spotlight.description | safe }}
	</p>
	<p>
		<a class="c-homepage-card__cta" href="/spotlight/{{ spotlight.name | slugify | url }}">{{ spotlight.cta }}</a>
	</p>
</div>
